<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
	
	<!-- mobile meta tag -->		
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<title>About Us - Sympathique</title> 
	
	<!-- main style -->
	<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
	
	<!-- color scheme -->
	<link rel="stylesheet" type="text/css" href="color-schemes/red/red.css" media="screen" title="red" />
	<link rel="stylesheet" type="text/css" href="color-schemes/yellow/yellow.css" media="screen" title="yellow" />
	<link rel="stylesheet" type="text/css" href="color-schemes/orange/orange.css" media="screen" title="orange" />
	<link rel="stylesheet" type="text/css" href="color-schemes/blue/blue.css" media="screen" title="blue" />
	<link rel="stylesheet" type="text/css" href="color-schemes/green/green.css" media="screen" title="green" />
	<link rel="stylesheet" type="text/css" href="color-schemes/purple/purple.css" media="screen" title="purple" />
	
	<!--miscellaneous-->
	<link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen">
	<link rel="stylesheet" type="text/css" href="css/prettyPhoto.css" media="screen"/>
	<link rel="stylesheet" type="text/css" href="css/font-awesome.css" media="screen"/>
	<link rel="stylesheet" type="text/css" href="css/audioplayer.css" media="screen" />	
	
	<!-- revolution slider settings -->
	<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />		

	<!-- setting mobile environment -->		
	<link rel="stylesheet" type="text/css" href="css/responsive.css" media="screen" />	
	
	<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="css/font-awesome-ie7.min.css">
	<![endif]-->
	
	<!--[if lt IE 9]>
	<script src="../../../html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="js/hoverIntent.js"></script>
	<script type="text/javascript" src="js/superfish.js"></script>
	<script type="text/javascript" src="js/jquery.jcarousel.js"></script>
	<script type="text/javascript" src="js/jquery.tweet.js"></script>
	<script type="text/javascript" src="js/jflickrfeed.js"></script>
	<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
	<script type="text/javascript" src="js/slides.min.jquery.js"></script>
	<script type="text/javascript" src="js/jquery.mobilemenu.js"></script>
	<script type="text/javascript" src="js/jquery.contact.js"></script>
	<script type="text/javascript" src="js/jquery.preloadify.min.js"></script>
	<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
	<script type="text/javascript" src="js/jquery.isotope.min.js"></script>
	
	<!-- jQuery Revolution Slider -->
	<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
	<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
	
	<link rel="stylesheet" type="text/css" href="template-changer.css" media="screen"/>		
	<script type="text/javascript" src="js/jquery.cookie.js"></script>	
	<script type="text/javascript" src="js/styleswitch.js"></script>	
	
	<!-- Google Web Fonts -->
	<link href='../../../fonts.googleapis.com/css@family=Open+Sans_3A300,400,600,700' rel='stylesheet' type='text/css'>


<script type="text/javascript">
	$(function()
		{
			// Call stylesheet init so that all stylesheet changing functions 
			// will work.
			$.stylesheetInit();
			
			// This code loops through the stylesheets when you click the link with 
			// an ID of "toggler" below.
			$('#toggler').bind(
				'click',
				function(e)
				{
					$.stylesheetToggle();
					return false;
				}
			);
			
			// When one of the styleswitch links is clicked then switch the stylesheet to
			// the one matching the value of that links rel attribute.
			$('.styleswitch').bind(
				'click',
				function(e)
				{
					$.stylesheetSwitch(this.getAttribute('rel'));
					return false;
				}
			);
		}
	);
</script>	
	
</head>
<body>
 

<!-- setting a fullscreen image as background:
<img id="bg" src="images/apple.jpg" alt="apple-background" />
-->


	<div class="theme-changer-wrap">
		<div class="theme-changer">
			<div class="changer-inner">				
				<span> COLOR SCHEME </span>
					<ul id="colors">
						<li><a href="about-us.html@style=yellow" rel="yellow" class="styleswitch color-yellow">yellow</a></li>
						<li><a href="about-us.html@style=orange" rel="orange" class="styleswitch color-orange">orange</a></li>
						<li><a href="about-us.html@style=blue" rel="blue" class="styleswitch color-blue">blue</a></li>
						<li><a href="about-us.html@style=green" rel="green" class="styleswitch color-green">blue</a></li>
						<li><a href="about-us.html@style=red" rel="red" class="styleswitch color-red">blue</a></li>
						<li><a href="about-us.html@style=purple" rel="purple" class="styleswitch color-purple">blue</a></li>
					
					</ul>
					<div style="clear:both; height:10px; width:100%"></div>				
			</div>
		</div>
		<div class="open-close"></div>
	</div> 	
<div id="wrapper">
	<header id="header">
		<div class="centered-wrapper">
			<div class="one-third">
				<div class="logo"><a href="index.html"></a></div>
			</div><!--end one-third-->
			
			<div class="two-third column-last">		
				<nav id="navigation">
					<ul id="mainnav">
						<li><a href="index.html"><span>HOME</span></a>
							<ul>
								<li><a href="index.html">Home Version 1</a></li>
								<li><a href="index-2.html">Home Version 2</a></li>
								<li><a href="index-3.html">Home Version 3</a></li>
								<li><a href="index-4.html">Home Version 4</a></li>
								<li><a href="index-onepage.html">Home One Page</a></li>
							</ul>							
						</li>
						<li><a href="#"><span>PAGES</span></a>
							<ul>
								<li><a href="gallery.html">Gallery</a></li>
								<li><a href="services.html">Services</a></li>
								<li><a class="current" href="about-us.html">About Us</a></li>
								<li><a href="pricing.html">Pricing Options</a></li>
								<li><a href="testimonials.html">Testimonials</a></li>
							</ul>
						</li>
						<li><a href="#"><span>FEATURES</span></a>
							<ul>								
								<li><a href="typography.html">Typography</a></li>
								<li><a href="columns.html">Columns</a></li>
								<li><a href="buttons-and-boxes.html">Buttons and Boxes</a></li>
								<li><a href="tabs-and-toggles.html">Tabs and Toggles</a></li>
								<li><a href="tables-and-lists.html">Tables and Lists</a></li>
								<li><a href="#">3rd Level Nav</a>
									<ul>
										<li><a href="#">this is</a></li>
										<li><a href="#">a third level</a></li>
										<li><a href="#">nav menu</a></li>
									</ul>							
								</li>
							</ul>				
						</li>						
						<li><a href="portfolio-four-columns.html"><span>PORTFOLIO</span></a>
							<ul>
								<li><a href="portfolio-grid.html">Grid Layout</a></li>
								<li><a href="portfolio-four-columns.html">4 Columns</a></li>
								<li><a href="portfolio-three-columns.html">3 Columns</a></li>
								<li><a href="portfolio-two-columns.html">2 Columns</a></li>
								<li><a href="portfolio-single.html">Portfolio Single</a></li>
							</ul>		
						</li>
						<li><a href="blog-masonry-2-columns.html"><span>BLOG</span></a>
							<ul>
								<li><a href="blog-masonry-2-columns.html">Masonry Layout 1</a></li>
								<li><a href="blog-masonry-3-columns.html">Masonry Layout 2</a></li>
								<li><a href="blog.html">Regular Layout</a></li>
								<li><a href="blog-single.html">Blog Post</a></li>
							</ul>
						</li>
						<li><a href="contact.html"><span>CONTACT</span></a>
							<ul>
								<li><a href="contact.html">Contact Layout 1</a></li>
								<li><a href="contact-fullwidth.html">Contact Layout 2</a></li>
							</ul>						
						</li>
					</ul>
				</nav><!--end navigation-->
			</div><!--end two-third-->
		<div class="clear"></div>			
		</div><!--end centered-wrapper-->
	</header>	
	
	<div class="top-shadow"></div>
	
	<section class="page-title">
	<div class="page-background">
		<div class="pattern1"></div>
	</div>
	<div class="bottom-shadow"></div>
		<div class="title-wrapper">
			<div class="title-bg">
				<div class="title-content">
					<div class="two-third">
						<h2>About Us</h2>
					</div>
					<div class="one-third column-last">		
					</div>
					<div class="clear"></div>
				</div><!--end title-content-->
			</div>
		</div><!--end title-wrapper-->
	</section>	

	<div class="centered-wrapper">				
				
		<div class="two-third">
			<h6>ABOUT US</H6>				
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas diam sapien, auctor sed blandit nec, adipiscing eget elit. Duis tempor elementum quam consequat condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Praesent volutpat nisl fringilla felis sodales elementum. Ut commodo arcu massa.</p>

			<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus..</p>
		</div>
		
		<div class="one-third column-last">
			<h6>OUR SKILLS</H6>
			<div id="skills"></div>
		</div>
		
		<div class="separator"></div>
		<div class="clear"></div>
		
		<h6>MEET THE TEAM</H6>
		<div class="team">
			<div class="one-fourth">
				<div class="team-member">
					<a href="images/member1.jpg" rel="prettyPhoto" title="Patrick Smith">
						<span class="item-on-hover"><span class="hover-image"></span></span>
						<img class="team-avatar" src="images/member1.jpg" alt=" " />
					</a>
					<div class="team-text">
						<h3>JOHN DOE</h3>
						<h6>Web Developer</h6>
					</div>				
				</div><!--end team-member-->	
			</div><!--end one-fourth-->
				
			<div class="one-fourth">
				<div class="team-member">
					<a href="images/member2.jpg" rel="prettyPhoto" title="Jane Doe">
						<span class="item-on-hover"><span class="hover-image"></span></span>
						<img class="team-avatar" src="images/member2.jpg" alt=" " />
					</a>
					<div class="team-text">
						<h3>ANDREW CLARK</h3>
						<h6>Marketing Manager</h6>
					</div>				
				</div><!--end team-member-->	
			</div><!--end one-fourth-->
			
			<div class="one-fourth">
				<div class="team-member">
					<a href="images/member3.jpg" rel="prettyPhoto" title="Jane Doe">
						<span class="item-on-hover"><span class="hover-image"></span></span>
						<img class="team-avatar" src="images/member3.jpg" alt=" " />
					</a>
					<div class="team-text">
						<h3>PATRICK SMITH</h3>
						<h6>CEO</h6>
					</div>				
				</div><!--end team-member-->	
			</div><!--end one-fourth-->				
				
			<div class="one-fourth column-last">
				<div class="team-member">
					<a href="images/member4.jpg" rel="prettyPhoto" title="Dan Whiteman">
						<span class="item-on-hover"><span class="hover-image"></span></span>
						<img class="team-avatar" src="images/member4.jpg" alt=" " />
					</a>
					<div class="team-text">
						<h3>GLEN JOHNSON</h3>
						<h6>HR Manager</h6>
					</div>					
				</div><!--end team-member-->	
			</div><!--end one-fourth-->
		</div><!--end team-->

		<div class="clear"></div>
	</div><!--end centered-wrapper-->
	
	<div class="space"></div>
	
	<footer id="footer">
		<div class="centered-wrapper">
			<div id="topfooter">
				<div class="one-half">
					<h3>About Us</h3>
					<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam veritatis et quasi nam liber tempore.</p>
					<div class="footer-logo"></div>
				</div><!--end percent-one-half-->
				<div class="one-half column-last">
					<div class="percent-one-half">
						<h3>We are on Twitter</h3>
						<div class="tweet1"></div>
					</div>
					
					<div class="percent-one-half column-last">
						<h3>Get in Touch with Us</h3>
						<ul>
							<li>Address: 1600 Amphitheatre Parkway, Mountain View, CA 94043</li>
							<li>Phone: +321 123 456 7<br/>
							E-mail: <a href="mailto:">johndoe@ipsum.com</a></li>
						</ul>
					</div><!--end one-half-->					
				</div><!--end one-half-->
			</div><!--end topfooter-->
		</div><!--end centered-wrapper-->
		
		<div id="bottomfooter">		
			<div class="centered-wrapper">		
				<div class="one-half">
					<p>COPYRIGHT &copy; 2013 - SYMPATHIQUE | ALL RIGHTS RESERVED. - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
				</div><!--end one-half-->

				<div class="one-half column-last">
					<ul id="social">
						<li><a class="rss" href="#">RSS Feed</a></li>
						<li><a class="facebook" href="#">Facebook</a></li>
						<li><a class="twitter" href="#">Twitter</a></li>
						<li><a class="flickr" href="#">Flickr</a></li>
						<li><a class="google" href="#">Google</a></li>
						
					<!-- You can add social icons for forrst, dribbble, vimeo, linkedin and skype. Take the ones you need from the list and paste them above
					
						<li><a class="forrst" href="#">Forrst</a></li>
						<li><a class="dribbble" href="#">Dribbble</a></li>
						<li><a class="vimeo" href="#">Vimeo</a></li>
						<li><a class="linkedin" href="#">LinkedIn</a></li>
						<li><a class="skype" href="#">Skype</a></li> 
					-->	
					</ul>					
				</div><!--end one-half-->
			</div><!--end centered-wrapper-->				
		</div><!--end bottomfooter-->
	</footer><!--end footer-->	
	
</div><!--end wrapper-->

	<script type="text/javascript" src="js/custom.js"></script>

</body> 
</html>